<template>
  <div>
   <!-- <div class="list-btn">
      日期:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始日期" style="width: 200px" ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束日期" style="width: 200px"  ></DatePicker>
    </div>
    <div class="list-btn">
       渠道:
      <Select clearable style="width:200px" v-model="params.channelCode" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option v-for="(item,index) in channelCodeList" :value="item.channelCode" :key="index">{{ item.channelName }}</Option>
      </Select>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>-->
    <div class="list-btn" style="position: absolute;right:40px;top:123px;z-index:9999999999999;">
      <Button type="primary" @click="$router.go(-1)">返回</Button>
    </div>
    <!--<div style="clear: both"></div>-->
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    methods:{

    },
    data () {
      return {
        tag: {
          'title': '客户催收率',
          'path': '/work/urgeRate/list'
        },
        sysUser:[],
        statusList:[
          {
            id: 0,
            name:'未分配'
          },
          {
            id: 1,
            name: '已分配'
          }
        ],
        listTitle: [
          {
            title:'催收详情查询',
            align:'left',
            children:[
            {
              title: '应还时间',
              minWidth: 100,
              key: 'repayTime',
              align:'center',
              render:(h,params) => {
                return h('div', params.row.repayTime ? this.getLocalDate(params.row.repayTime) : "—")
              }
            },
            {
              title: '订单ID',
              key: 'id',
              minWidth:120,
              align:'center'
            },
            {
              title: '订单编号',
              key: 'nid',
              minWidth:180,
              align:'center'
            },
            {
              title: '借款金额(元)',
              key: 'loanMoney',
              minWidth:100,
              align:'center',
              render:(h,params) => {
                return h('div', this.toYuan(params.row.loanMoney))
              }
            },
            {
              title: '已还金额(元)',
              key: 'repaymentMoney',
              minWidth:100,
              align:'center',
              render:(h,params) => {
                return h('div', this.toYuan(params.row.repaymentMoney))
              }
            },
            {
              title: '待还金额(元)',
              key: 'needRepayment',
              minWidth:100,
              align:'center',
              render:(h,params) => {
                return h('div', this.toYuan(params.row.needRepayment))
              }
            },
            {
              title: '入催状态',
              key: 'status',
              minWidth:80,
              align:'center',
              render:(h,params) => {
                let test = '';
                let color = '';
                if(params.row.status == 2){
                  test = '未入催';
                  color='rgb(25, 190, 107)';
                }else{
                  test = '已入催';
                  color = '#ed4014';
                }
                return h('div',{
                  style:{
                    color: color
                  }
                }, test)
              }
            },
            {
              title: '逾期状态',
              key: 'status',
              minWidth:80,
              align:'center',
              render:(h,params) => {
                let test = '';
                let color = '';
                if(params.row.status == 3){
                  test = '已逾期';
                  color = '#ed4014';

                }else{
                  test = '未逾期';
                  color='rgb(25, 190, 107)';

                }
                return h('div',{
                  style:{
                    color: color
                  }
                }, test)
              }
            },
            {
              title: '逾期天数(天)',
              key: 'days',
              minWidth:100,
              align:'center'
            },
            {
              title: '还款状态',
              key: 'status',
              minWidth:80,
              align:'center',
              render:(h,params) => {
                let test = '';
                let color = '';
                if(params.row.status == 2){
                  test = '已还款';
                  color='rgb(25, 190, 107)';

                }else{
                  test = '未还款';
                  color = '#ed4014';
                }
                return h('div',{
                  style:{
                    color: color
                  }
                }, test)
              }
            },
          ]
          },
        ],
        url: '/statistics/collection/detail',
        nameListUrl: '',
        params: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10,
          repayTimeStr:''
        },
      }
    },
    mounted() {
      this.getChannel();
    },
    created(){
      this.params.repayTimeStr = this.getLocalDate(this.$route.query.repayTimeStr);
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
